import { Button, Swiper, Toast } from "antd-mobile";
import { useNavigate } from "react-router";

export default function HomePage() {
  const navigate = useNavigate();

  const colors = ["#ace0ff", "#bcffbd", "#e4fabd", "#ffcfac"];

  const items = colors.map((color, index) => (
    <Swiper.Item key={index}>
      <div
        style={{ background: color }}
        className="h-[220px]"
        onClick={() => {
          Toast.show(`你点击了卡片 ${index + 1}`);
        }}
      >
        {index + 1}
      </div>
    </Swiper.Item>
  ));
  return (
    <div>
      <Swiper>{items}</Swiper>

      <div className="pt-3 border-t border-t-[#333]">
        <h1 className="text-center">Menu</h1>
        <div className="p-3">
          <div>
            <Button
              block
              color="primary"
              size="large"
              onClick={() => {
                navigate({
                  pathname: "/",
                });
              }}
            >
              Home
            </Button>
          </div>
          <div className="mt-3">
            <Button
              block
              color="primary"
              size="large"
              onClick={() => {
                navigate({
                  pathname: "/about",
                });
              }}
            >
              About
            </Button>
          </div>
        </div>
      </div>
    </div>
  );
}
